<template>
  <h1 class="title">用户登录</h1>
  <el-row v-if="showCover" :gutter="12" style="width: 100%; height: 60px" class="cells-row" justify="space-evenly">
    <el-col :span="1"/>
    <el-col :span="5" class="container">
      <el-card class="card" :body-style="{ padding: '0px' } ">
        <el-button class="button" @click="showCover=false;userForm.userTypeName='管理员';">
          <span class="text-center">管理员</span>
        </el-button>
      </el-card>
    </el-col>
    <el-col :span="1"/>
    <el-col :span="5" class="container">
      <el-card class="card" style="width: 100%" :body-style="{ padding: '0px' }">
        <el-button class="button" @click="showCover=false;userForm.userTypeName='操作员';">
          <span class="text-center">操作员</span>
        </el-button>
      </el-card>
    </el-col>
    <el-col :span="1"/>
    <el-col :span="5" class="container">
      <el-card class="card" :body-style="{ padding: '0px' }">
        <el-button class="button" @click="showCover=false;userForm.userTypeName='司机';">
          <span class="text-center">司机</span>
        </el-button>
      </el-card>
    </el-col>
    <el-col :span="1"/>
  </el-row>
  <el-row v-else justify="space-evenly">
    <el-col :span="3">
      <img v-if="userForm.userTypeName==='管理员'" style="width: 250px" src="../assets/administrator.png" alt="管理员"/>
      <img v-else-if="userForm.userTypeName==='操作员'" style="width: 250px" src="../assets/consult.png" alt="操作员"/>
      <img v-else style="width: 250px" src="../assets/driver.png" alt="司机"/>
    </el-col>
    <el-col :span="6">
      <el-form class="log-in" :model="userForm" label-width="100px" label-position="left">
        <el-form-item label="用户类型">
          <el-select v-model="userForm.userTypeName" placeholder="选择您的用户类型" size="large">
            <el-option v-for="(value, index) in UserType.properties"
                       :key="index" :label="value.name" :value="value.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="userForm.username" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userForm.password" type="password"
                    placeholder="请输入密码" show-password/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <p v-show="isFailed" style="color: #ff0000;margin-left: 8px">{{ failMessage }}</p>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import {reactive} from "vue";
import {UserType, loginAccount} from "@/scripts/account";
import {goToUserHome} from "@/scripts/router";
import {ElNotification} from "element-plus";

export default {
  name: "LoginView",
  props: {
    isGoingBack: Boolean
  },
  data() {
    return {
      showCover: false,
      userForm: reactive({
        userTypeName: '',
        username: '',
        password: ''
      }),
      UserType,
      isFailed: false,
      failMessage: ''
    }
  },
  methods: {
    onSubmit() {
      if (this.userForm.userTypeName === '' || this.userForm.username === '' || this.userForm.password === '') {
        this.isFailed = true;
        this.failMessage = '请填完所有内容'
        return
      }
      loginAccount(this.userForm.userTypeName, this.userForm.username, this.userForm.password, (result) => {
        if (result) {
          ElNotification({
            title: '登录成功',
            message: '欢迎您，' + this.userForm.username,
            type: 'success'
          })
          if (this.isGoingBack) {
            this.$router.back()
          } else {
            goToUserHome()
          }
        } else {
          this.isFailed = true
          this.failMessage = '用户名或密码错误'
          ElNotification({
            title: '登录失败',
            message: '你想做什么？😡',
            type: 'error'
          })
        }
      });
      this.showCover = false;
    }
  }
}
</script>

<style scoped>
.title {
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.cells-row {
  margin-bottom: 20px;
}

.cells-row:last-child {
  margin-bottom: 0;
}

.container {
  width: 60px;
}

.log-in {
  /*position: absolute;*/
  /*top: 50%;*/
  /*bottom: 50%;*/
  /*left: 0;*/
  /*right: 0;*/
  /*margin: fill;*/
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
  /*flex-direction: column;*/
}

.card {
  /*position: relative;*/
  /*width: 100%;*/
  /*max-width: 100%;*/
  /*flex-direction: row;*/
}

.button {
  padding: 90px;
  width: 100%;
  height: 400px;
  background-color: #d4fad4;
  font-size: xx-large;
}

.text-center {
  text-align: center !important;
}
</style>
